<template>
	<view class="container">
		<view class="head">
			<navigator hover-class="none"
				:url="'/pages/search/search?index='+searchType+'&searchKey='+search.searchKey+'&ifRecommend=0&isNewProduct='+isNewProduct"
				class="search">
				<view class="left-icon"><uni-icons class="icon" color="#a1a0a0" type="left" size="20"></uni-icons>
				</view>
				<view class="icon-input">
					<uni-icons class="icon" color="#a1a0a0" type="search" size="20"></uni-icons>
					<input placeholder="输入关键字搜索产品/供应商" placeholder-class="input" v-model="search.searchKey" />
				</view>
			</navigator>
			<view class="type-btn">
				<view :class="{active:searchType==1}" @click="changeQuery(1)">全部</view>
				<view :class="{active:searchType==3}" @click="searchType=3">供应商</view>
				<view :class="{active:searchType==4}" @click="changeQuery(4)">新品</view>
			</view>
			<view class="condition">
				<view class="c">
					<view class="title" :class="{checkTitle:sort==''}" @click="changeSort('')">
						综合推荐
						<view class="triangle-down"></view>
					</view>
				</view>
				<view class="c active">
					<view class="title" :class="{checkTitle:sort!=''}" @click="changeSort(sort=='asc'?'desc':'asc')">
						价格
						<view v-show="sort=='asc'" class="triangle-up"></view>
						<view v-show="sort=='desc'" class="triangle-down"></view>
					</view>
				</view>
				<view class="c">
					<view class="title" @click="handleConditionOpen(1)">
						品牌范围
						<view class="triangle-down triangle-up-down"></view>
					</view>
				</view>
				<view class="c sieve" @click="$refs.sieve.open()">
					筛选
					<text class="b-icon icon-c"></text><!-- 
					<image class="img" src="/static/image/common/add_menu.png" mode="widthFix" /> -->
				</view>
				<view class="module" v-if="isMoule">
					<view class="leibie">
						<view class="data options">
							<view id="" class="item" v-for="(item,index) in selects.brandRangeList" :key="index"
								:class="{active:item.active==true}" @click="changeOption('brandRangeList',item)">
								{{item.name}}</view>
						</view>
						<view class="btns">
							<view class="" @click="reset()">重置</view>
							<view class="" @click="queryProduct(1)">确定</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<product-list v-if="searchType!=3" :product-list="productList" @onReachBottom="onReachBottom">
		</product-list>
		<!--供应商-->
		<cust-list v-if="searchType==3" :searchKey="search.searchKey">
		</cust-list>
		<uni-popup ref="sieve" type="bottom">
			<view class="popup-module">
				<view class="title">
					<view></view>
					<view class="name">全部筛选</view>
					<view class="close" @click="$refs.sieve.close()"><uni-icons class="icon" color="#4c4c4c"
							type="closeempty" size="20"></uni-icons></view>
				</view>
				<view class="content">
					<view class="data">
						<view class="t">品牌范围</view>
						<view class="list">
							<view id="" class="item" v-for="(item,index) in selects.brandRangeList" :key="index"
								:class="{active:item.active==true}" @click="changeOption('brandRangeList',item)">
								{{item.name}}</view>


						</view>
					</view>
					<view class="data">
						<view class="t">区间</view>
						<view class="nums">
							<input placeholder-class="input" v-model="floorPrice" placeholder="自定义最低价" />
							<view>-</view>
							<input placeholder-class="input" v-model="peakPrice" placeholder="自定义最高价" />
						</view>
					</view>
					<view class="data">
						<view class="t">分类</view>
						<view class="list">
							<view id="" class="item" v-for="(item,index) in selects.proClassifyList" :key="index"
								:class="{active:item.active==true}" @click="changeOption('proClassifyList',item)">
								{{item.name}}</view>


						</view>
					</view>
				</view>
				<view class="btns">
					<view @click="reset()">重置</view>
					<view @click="queryProduct(1)">确定</view>
				</view>
			</view>
		</uni-popup>
    <suspension ref="suspension" types="group"></suspension>
	</view>
</template>

<script>
	import ProductList from "../../../components/product/ProductList.vue";
	import request from '@/utils/request/index.js';
	import CustList from "../../../components/product/CustList";
	import commonApi from '@/utils/commonMethod.js';

	export default {
		components: {
			CustList,
			ProductList
		},

		data() {
			return {
				isMoule: false,
				searchType: 1,
				productUrl: '/h5/nocproduct/conditionsPro',
				register: false, //登录
				aaa: 4,
				arrBrandList: [], //记录品牌选中
				list: [],
				num: 0,
				arr: [],
				scroll: '',
				Topscroll: false, //置顶
				scope: false, //范围
				classify: false, //分类
				floorPrice: '', //最低价格
				peakPrice: '', //最高价格
				classifyIdList: [], //分类的ID
				brandRangeListId: [], //品牌范围ID
				brandList1Id: [], //品牌ID
				proClassifyList: [], //分类
				add: true,
				brandList1: [],
				brand: false,
				actived: 0,
				shade: false,
				shades: false,
				tabShaixuan: false,
				shaixuan: false,
				changeTabsShow: false,
				index: 0,
				noMore: false,
				noData: false,
				loading: false,
				search: {
					searchKey: '',
					page: 1,
					totalPage: 1,
					limit: 10
				},
				videoList: [], //视频列表
				productList: [], //产品列表
				liveList: [], //直播列表
				compList: [], //需求列表
				ifRecommend: false,
				defaultZhiBoImg: '',
				title: '搜索',
				newsList1: [],
				newsList2: [],
				currentUser: [],
				selects: {
					brandRangeList: [],
					proClassifyList: [],
					data: {
						brandRangeList: [],
						proClassifyList: []
					}
				},
				brandRangeList: [],
				brandList: [],
				screen: 1,
				number: 0,
				sort: '',
				classifyList: [],
				checkClassifyList: [],
				grade: '',
				classifyId: '',
				exhibitionFlag: '', //分类排序
				pageLocation: '',
				isNewProduct: '',
				ccc: '',

        share_title:'产品中心_供应商信息-金诺云展',
				share_desc:'找产品上金诺云展，找供应商上金诺云展，机械加工行业对接平台',
				share_url:'',
				share_search:'',
				
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
				
				
			};
		},

		onLoad(option) {
			console.log('-------', option)
			this.getBranchRangeList();
			if (option.searchKey) {
				//this.search.searchKey = option.keyword;
				this.search.searchKey = decodeURI(option.searchKey);
				 if(this.search.searchKey != null && this.search.searchKey !=''){
					this.share_search = this.search.searchKey + "_";
				}

			}

			this.isNewProduct = option.isNewProduct;
			if (option.index == 0) {
				this.searchType = 1
			} else {
				this.searchType = option.index;
			}
			if(option.isNewProduct){
				this.isNewProduct = option.isNewProduct
			}
		},
		onShow(){
			if(uni.getStorageSync("register") == 1){
				this.$refs.suspension.setRegister(false);
			}
			this.search.searchKey = decodeURIComponent(this.search.searchKey);
			setTimeout(()=> {
				
				if (getApp().globalData.onShow) {
					getApp().globalData.onShow = 0;
					console.log("demo前后台切换之切到前台")
				}
				else {
					console.log("demo页面被切换显示")
					this.startTime = +new Date();
				}
				
			}, 100);
		},
		onHide(){
			setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},
		onUnload(){
			setTimeout(() => {
				var that = this
				if (getApp().globalData.onHide) {
					getApp().globalData.onHide = 0;
					console.log("还在当前页面活动")
				}
				else {
					that.endTime = +new Date();
					console.log("demo页面停留时间：" + (that.endTime - that.startTime))
					var stayTime = Math.round((that.endTime - that.startTime)/1000);
				   //这里获取到页面停留时间stayTime，然后了可以上报了
				   this.saveFootPrint(stayTime);
				}
			}, 100)
		},

		mounted() {
			this.queryProduct();
			
			commonApi.getPageShareConfig().then(res =>{
				  res.data.list.forEach((value, index, array) => {
					if (value.pageParam.includes("product_search")) {
						if (value.shareTitleConfig != null && value.shareTitleConfig != '') {
							this.share_title = value.shareTitleConfig
						}
						if (value.shareDescConfig != null && value.shareDescConfig != '') {
							this.share_desc = value.shareDescConfig
						}
					}
				})
       
			})
			const pages =getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.share_url = currentPage.$page.fullPath

		},
		onShareAppMessage: function () {//分享
			return {
				title: this.share_search + this.share_title,
        path: this.share_url + '&sourceUserId=' + uni.getStorageSync("userId"),
				desc: this.share_desc,
				imageUrl: 'https://m.nocexpo.com/statics/js/modules/h5/img/logo1.png',
				success: function (res) {
					console.info(res + '成功');
					wx.showToast({
						title: '分享成功',
					})
					// 转发成功
				},
				fail: function (res) {
					console.log(res + '失败');
					// 转发失败
				},
			 
			}
		 },
		/*分享朋友圈 */
		onShareTimeline: function() {
			return {
				title: this.share_search + this.share_title,
        query: 'index='+ this.searchType +'&searchKey=' + encodeURIComponent(this.search.searchKey) + '&ifRecommend=0&isNewProduct=' + this.isNewProduct + '&sourceUserId=' + uni.getStorageSync("userId"),
				imageUrl: 'https://m.nocexpo.com/statics/js/modules/h5/img/logo1.png',
			}
		},
		methods: { 
			saveFootPrint(stayTime){
				commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.share_url,"产品列表")
				
			},
			handleConditionOpen(type) {
				this.isMoule = true;
				this.type = type;
			},
			queryProduct(page) {
				if (this.searchType == 3) {
					return;
				}
				if (page) {
					this.isMoule = false;
					this.search.page = 1;
					this.productList = [];
					this.$refs.sieve.close();
				}
				request.request({
					url: this.productUrl,
					data: {
						search: this.search.searchKey, //搜索关键字
						page: this.search.page, //页码
						limit: this.search.limit, //页面大小
						ifCommend: this.ifRecommend ? 1 : '', //是否清理缓存
						sort: this.sort, //排序
						grade: this.grade,
						classifyId: this.classifyId,
						exhibitionFlag: '',
						floorPrice: this.floorPrice,
						peakPrice: this.peakPrice,
						classifyIdList: this.selects.data.proClassifyList, //分类
						brandRangeListId: this.selects.data.brandRangeList, //品牌
						brandList1Id: this.brandList1Id,
						isNewProduct: this.isNewProduct,
					},
					allResult: true
				}).then(e => {
					let list = e.page.list;
					list.forEach(e => {
						if (e.price == null || e.price == 0) {
							e.price = '询价';
						} else if (e.price > 9999) {
							e.price = (e.price / 10000).toFixed(2) + "万";
						}
					})
					this.productList = [...this.productList, ...list]; //.concat(e.page.list);
					console.log(e.page.list);
					this.search.totalPage = e.page.totalPage;
					this.loading = false;
				});
			}
			//重置
			,
			reset() {
				this.isMoule = false;
				//下拉框重置
				this.getBranchRangeList();
				this.selects.proClassifyList = [];
				//数据重置
				this.selects.data.brandRangeList = [];
				this.selects.data.proClassifyList = [];
				this.search.searchKey = '';
				this.peakPrice = null;
				this.floorPrice = null;

				this.queryProduct(1);
			}

			//修改选项
			,
			changeOption(type, item) {
				let list = this.selects[type];
				if (item.active) {
					item.active = !item.active;
				} else {
					item.active = true;
				}
				if (type === 'brandRangeList') {
					this.getBranchList();
				}
				//设置数据
				this.selects.data[type] = [];
				list.filter(e => e.active).forEach(e => {
					this.selects.data[type].push(e.code);
				})


			},
			getBranchRangeList() {
				const url = "/base/basebrandclassify/queryList";
				request.request({
					url: url,
					data: {}
				}).then(e => {
					this.selects.brandRangeList = [];
					this.selects.data.brandRangeList = [];
					if (e.data && e.data.code === 0) {
						e.data.list.forEach(e => {
							this.selects.brandRangeList.push({
								code: e.id,
								name: e.className,
								active: false
							});
						});
					}
				});
			},
			getBranchList() {
				this.selects.proClassifyList = [];
				this.selects.brandRangeList.filter(e => e.active).forEach(e => {
					let url = "/base/basebrand/byClassIdKeyword";
					request.request({
						url: url,
						data: {
							classId: e.code,
							searchKe: ""
						}
					}).then(res => {
						console.log(res);
						if (res.data && res.data.code === 0) {
							res.data.brandList.forEach(itemBranch => {
								this.selects.proClassifyList.push({
									code: itemBranch.id,
									name: itemBranch.brandName,
									active: false
								});
							});
						}
					});
				});

			},
			//分页查询
			queryPage() {
				if (this.search.page < this.search.totalPage) {
					this.search.page++;
					return true;
				} else {
					return false;
				}

			},
			onReachBottom() {
				//不是加载中，则执行
				if (!this.loading) {
					this.loading = true;
					if (this.queryPage()) {
						this.queryProduct();
					}
				}
			}, //修改排序
			changeSort(sort) {
				this.sort = sort;
				this.queryProduct(1);
				//重新查询
			},
			changeQuery(index) {
				if (this.searchType == index) {
					return;
				}
				this.searchType = index;

				if (index == 1) {
					this.isNewProduct = ''
				}

				if (index == 4) {
					this.isNewProduct = 1
				}
				this.queryProduct(1);

			}
		}
	};
</script>
<style lang="scss">
	@import '../list.scss';

	.checkTitle {
		color: #000;
		font-weight: 700;
	}
</style>